<template>
    <div id="video_container">
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <div id="my_video_container">
            <video  class="video-js vjs-big-play-centered" id="video_" x5-playsinline="true" webkit-playsinline="true" playsinline="true" controls controlsList="nodownload"
                    v-if="vdatas.isCharge!=1">
            </video>
            <img  v-if="vdatas.isCharge==1" v-lazy="vdatas.stills+'?cmd=imageprocess/processtype/2/quality/100/width/514'" class="vidoe_char_img"/>
            <div  v-if="vdatas.isCharge==1"  class="vidoe_char_div"></div>
            <div  v-if="vdatas.isCharge==1"  class="vidoe_char_div2">
                <p class="p1">本视频需付费观看</p>
                <p class="p2">
                    <span class="p_btn_1"><router-link :to="{name: 'Album', params: {albumid:vdatas.albumId}}">进入专辑 ></router-link></span>
                    <span class="p_btn_2" @click="openapp2()">购买此专辑</span></p>

            </div>

            <!--<video id="my_video" v-if="vdatas" :src="getFirstUrl(vdatas.playUrl)"-->
            <!--:poster="vdatas && vdatas.stills + '?cmd=imageprocess/processtype/2/quality/100/width/414'"-->
            <!--controls="controls" height="100%" width="100%"></video>-->
        </div>
        <div id="video_openapp" @click="openApp()">
            打开「扬帆App」获得更好的播放体验
        </div>
        <!--<div id="democon"></div>-->
        <div id="wrapper">
            <div v-if="vdatas">
                <div class="video-title">{{vdatas.name}}</div>
                <author2 :channelInfo="channelInfo" :info="vdatas"></author2>
                <div class="video-content">{{vdatas.description}}</div>
            </div>
            <div class="greyChannel"></div>
            <!-- 其它相关视频专用左文右图组件 -->
            <div>
                <listvideosmall v-for="(item,index) in contentList.rows" :info="item" v-if="contentList.totalCount>0"></listvideosmall>
            </div>
            <div class="page-container" @click="getContents()">{{loadMore}}<span class="down-arrow"></span></div>

            <remarknew v-if="usecomtype==2"  :topicid="vdatas.topicid" :reportData="commentReportData" :onTop="onTop" :comtype="'commnet'"
                       @change3="getCounter" :isRealtime="isRealtime" :maxcount="2"></remarknew>
            <remarkold v-if="usecomtype==1"  :params="paramValue" :reportData="commentReportData" :onTop="onTop"
                       @change2="getCounter"></remarkold>
            <btn text="去「扬帆App」参与讨论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
            <div class="edit-takeup" v-if="!onTop"></div>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    import Wakeup from "../../assets/libs/func/callapp.js"

    var player;

    export default {
        components: {
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve)
            },
            Author2: function (resolve) {
                require(["../../components/author2.vue"], resolve)
            },
            Listvideosmall: function (resolve) {
                require(["../../components/list_video_small.vue"], resolve)
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve)
            },
            Remarkold: function (resolve) {
                require(["../../components/remark_old.vue"], resolve)
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve)
            },
            Wakeup
        },
        data: function () {
            return {
                jhb_info:{
                    contentId:this.$route.params.videoid,
                    contentType:5
                },
                usecomtype: 0,//评论使用新旧系统1:旧 2:新
                remarkNum: 0,
                channelInfo: {},
                contentList: {
                    rows: [],
                    style: 0,
                    totalCount: 0
                },
                vdatas: {},
                channelid: "",
                vid: "",
                commentInfo: {},

//                theTopicId: "",

                // time: 1,    // 需要上报的时间参数
                // timer: {},  // 计时器函数对象,
                sTime: 0,
                isCounter: true,

                commentReportData: {},

                paramValue: {
                    businessType: "vod",
                    activityId: this.$route.params.channelid,   // 177555
                    roleType: "0",
                    programId: this.$route.params.videoid,    // 40288db463f2ba5e0163f713841302aa
                    preChatId: "0"
                },

                layerDisplay: {
                    type: Boolean,
                    default: true
                },

                page: 1,
                pageSize: 5,
                loadMore: "加载更多",
                canLoadMore: true,

                callApp: {
                    contentType: 3,
                    contentParam: this.$route.params.videoid
                },
                onTop: true,
                isRealtime:false,
            }
        },
        beforeCreate: function () {
            let that = this;

            // 获取频道信息
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            channelId: this.$route.params.channelid
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
                // 404重定向
                if (response.data.state === 2012){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                this.channelInfo = response.data.data;
                // console.log("-----------------------");
                // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("-----------------------");
            });

            // 获取视频：By 李晔
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getVideoDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            videoId: this.$route.params.videoid     // 40288db463d55cdf0163f1d4cad305fc
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
//                 console.log("==========================");
//                 console.log(JSON.stringify(response.data.data, undefined, 2));
//                 console.log("==========================");
                //404
                if (response.data.state == 2056){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                let that = this;
                that.vdatas = response.data.data;
             //   console.log(JSON.stringify(that.vdatas, undefined, 2));
//                that.theTopicId = that.vdatas.id;
//                that.vdatas.topicid = "5b9649cb8a3b951720186f27";   // 测试用数据
                function doAccessvideo() {
                    let actionType = "accessvideo";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "contentid":that.$route.params.videoid,
                        "imei": "",
                        "extendtag": "",
                        "type": "vod_1",
                        "contenttype": "vod",
                        "opertime": that.toFullTime(),
                        "contentname":that.vdatas.name,
                        "channelid": that.$route.params.channelid ,
                        "sharetype": "",
                    };
                    shareUrlReport(behaviorData, actionType);
                }
                doAccessvideo();
                if(that.vdatas.isCharge!=1){
                    player = videojs('video_', {
                        muted: false,	//是否静音
                        controls: true, //是否显示控制条
                        autoplay: false, //自动播放
                        poster: that.vdatas ? that.vdatas.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",//视频播放前剧照封面图
                        sources: [{
                            src: that.getHlsUrl(that.vdatas.playUrl),
                        }],//播放源
                    });
                }

                // 加载dplayer播放器
            /*    dp = new DPlayer({
                    container: document.getElementById("my_video_container"),
//                    screenshot: true,
                    autoplay: false,
                    video: {
                        url: that.getHlsUrl(that.vdatas.playUrl),
                        pic: that.vdatas ? that.vdatas.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",
                        thumbnails: that.vdatas ? that.vdatas.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png"
                    },
                });*/

           //  $(".dplayer-video-wrap video").attr("x5-video-orientation","landscape");
                this.axios.get(
                    /*"https://yfhefei.butel.com:44335/setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}"*/
                    interbaseUrl
                    + "setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}")
                    .then((response) => {
                        let oldCommentLink = response.data.data.rows[0].value;
                        if (oldCommentLink == "true") {
                            that.usecomtype = 1;
                        } else if (oldCommentLink == "false" &&
                            (that.vdatas.topicid == ""
                                || typeof(that.vdatas.topicid) == "undefined"
                                || that.vdatas.topicid == null)) {
                            that.usecomtype = 1;
                        }
                        if(oldCommentLink == "false" &&
                            !(that.vdatas.topicid == "")
                                && !(typeof(that.vdatas.topicid) == "undefined")
                                && !(that.vdatas.topicid == null)){
                            that.usecomtype = 2;
                        }
                      //  alert("oldCommentLink:"+oldCommentLink+";usecomtype:"+that.usecomtype);
                    });
                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? this.vdatas.shareTitle : "视频不存在",
                    content: !(response.data.state == 2056) ? this.vdatas.shareContent : "视频不存在",
                    name: !(response.data.state == 2056) ? that.vdatas.name : "视频不存在"
                };
                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(!(response.data.state == 2056) ? this.vdatas.shareTitle : "视频不存在");



//                console.log(JSON.stringify(response.data.state == 2056, undefined, 2));
                this.paramValue.contenturl = window.location.href;
                this.paramValue.contenttitle = !(response.data.state == 2056) ? that.vdatas.name : "视频不存在";

                // 评论comment行为
                that.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: "",
                    contentid: that.$route.params.videoid,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: that.vdatas.name,
                    extendtag: "",
                    type: "vod_1",
                    contenttype: "vod",
                    opertime:  that.toFullTime(),
                    channelid: that.$route.params.channelid
                };

                that.paramValue.contenturl = window.location.href;
                that.paramValue.contenttitle = that.vdatas.name;
                if(that.vdatas.isCharge!=1){
                    setTimeout(function(){
                        // 监听播放事件：获取对象
                        let media = document.getElementById("video__html5_api");
                        // console.log(media);
                        // 触发计时器
                        let goTimer = function () {
                            if (that.isCounter) {
                                that.sTime = Math.round(new Date().getTime() / 1000);
                                that.isCounter = false;
                                doPlay();
                            }
                        };
                        media.addEventListener("play", goTimer, false);

                        // 触发观看视频play行为
                        function doPlay() {
                            let actionType = "play";
                            let behaviorData = {
                                uid: "",
                                username: "",
                                ip: "",
                                openid: "",
                                contentid: that.$route.params.videoid,
                                playurl: that.vdatas.playUrl,
                                imei: "",
                                name: that.vdatas.name,
                                extendtag: "",
                                contenttype: "vod",
                                type: "vod_1",
                                opertime:  that.toFullTime(),
                                channelid: that.$route.params.channelid
                            };
                            shareUrlReport(behaviorData, actionType);
                        }

                    },500)
                }



                // 二次分享
                this.initShareConfig = initShareConf(
                        that.vdatas.shareTitle,
                        that.vdatas.shareContent,
                        that.vdatas.shareImg,
                        window.location.href,
                        {
                            uid: "",
                            username: "",
                            opertime: that.toFullTime(),
                            imei: "",
                            openid: "",
                            ip: "",
                            channelid: that.$route.params.channelid,
                            contentid: that.$route.params.videoid,
                            name: that.vdatas.name,
                            contenttype: "vod",
                            type: "vod_1",
                            tagid: "",
                            extendtag: "",
                            sharetype: "weixin",
                            shareurl: window.location.href
                        }
                );
            });
        },
        mounted: function () {
            let that = this;
            that.getContents();

            // 配置二次分享信息
            window.initShareConfig = initShareConf(
                    that.vdatas.shareTitle,
                    that.vdatas.shareContent,
                    that.vdatas.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        tagid: "",
                        contentid: that.$route.params.videoid,
                        imei: "",
                        openid: "",
                        ip: "",
                        name: that.vdatas.name,
                        extendtag: "",
                        type: "vod_1",
                        contenttype: "vod",
                        opertime:  that.toFullTime(),
                        channelid: that.$route.params.channelid
                    }
            );

        }
        ,
        beforeDestroy: function () {
            let that = this;
            if(that.vdatas.isCharge!=1){
                player.dispose();
            }

            // 播放时长duration行为
            let playTime = Math.round(new Date().getTime() / 1000) - that.sTime;

            function doDuration() {
                let actionType = "duration";
                let behaviorData = {
                    uid: "",
                    username: "",
                    imei: "",
                    ip: "",
                    openid: "",
                    opertime: that.toFullTime(),
                    channelid: that.$route.params.channelid,
                    contentid: that.$route.params.videoid,
                    name: that.vdatas.name,
                    playurl: window.location.href,
                    playtime: playTime,
                    // playurl: that.vdatas.playUrl,
                    // playtime: that.vdatas.vLength,
                    contenttype: "vod",
                    type: "vod_1",
                    extendtag: "",
                    tagid: ""
                };
                // console.log(behaviorData);
                shareUrlReport(behaviorData, actionType);
                clearTimeout(that.timer);
            }

            doDuration();
        },
        methods: {
            getState: function (bol) {
                // console.log(bol);
                this.layerDisplay = bol;
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
            openapp2:function(){
               /* let r=confirm("购买专辑将打开【扬帆】app，确认打开吗?");
                if(r==false){
                    return false;
                }else if(r==true){
                    openDownPage(this.callApp.contentType, this.callApp.contentParam);
                }*/
                let that=this;
                that.$dialog.confirm('购买专辑将打开【扬帆】app，确认打开吗?',{
                    okText: '确定',  // 本地化确认按钮文字提示内容
                    cancelText: '取消',  //本地化关闭按钮文字提示内容
                })
                    .then(function () {
                        // 点击确定执行
                        openDownPage(this.callApp.contentType, this.callApp.contentParam);
                    })
                    .catch(function () {
                        // 点击取消执行
                    });


            },
            // 获取相关联的视频内容：注意数据结构的转换
            getContents: function () {
                this.loadMore = "加载中，请稍候...";
                this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getRelatedVideoList",
                        qs.stringify({
                            params: JSON.stringify({
                                videoId: this.$route.params.videoid,
                                idx: (this.page - 1) * this.pageSize,
                                size: this.pageSize
                            }), apiVersion: process.env.VUE_APP_SERVER_VER
                        })
                ).then((response) => {
                    let responseData = response.data.data;
                    // console.log("**************************");
                    // console.log(JSON.stringify(responseData, undefined, 2));
                    // console.log("**************************");

                    // 进行必要的数据格式转换
                    for (let key in responseData.rows) {
                        responseData.rows[key] = {
                            content: responseData.rows[key]
                        };
                        responseData.rows[key].contentId = responseData.rows[key].content.id;
                        responseData.rows[key].type = 5;
                    }

                    this.contentList.style = responseData.style;
                    this.contentList.totalCount = responseData.totalCount;
                    if (this.canLoadMore)
                        this.contentList.rows = this.contentList.rows.concat(responseData.rows);
                    this.page++;
                    if ((this.page - 1) * this.pageSize >= responseData.totalCount) {
                        this.loadMore = "已经加载全部";
                        this.canLoadMore = false;
                        $(".down-arrow").hide();
                    } else {
                        this.loadMore = "加载更多";
                    }
                    // console.log("**************************");
                   //  console.log(JSON.stringify(this.contentList, undefined, 2));
                    // console.log("**************************");
                });
            },
            openApp: function () {
                openDownPage(this.callApp.contentType, this.callApp.contentParam);
            },
            goablam:function(){
                
            }
        }
    }
</script>

<style>
    #video_container {
    }

    #video_openapp {
        font-size: 0.9rem;
        line-height: 2.6rem;
        color: #FFF;
        text-align: center;
        background-color: #9852FF;
    }

    #my_video_container {
        width: 100%;
        padding-bottom: 56.25%;
        position: relative;
    }

    #my_video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }

    .video-title {
        font-size: 1.3rem;
        line-height: 1.8rem;
        font-weight: bold;
    }

    .video-content {
        font-size: 0.9rem;
        line-height: 1.2rem;
        color: #999999;
    }

    .dplayer-video-wrap {
        position: absolute;
    }

    .list-video-small-component-item:nth-child(1) {
        border-top: 0;
    }

    .page-container {
        margin-top: 15px;
        line-height: 30px;
        border-bottom: 1px solid #EDEDED;
    }

    .down-arrow {
        display: inline-block;
        position: relative;
        width: 12px;
        height: 10px;
        margin-right: 10px;
    }

    .down-arrow::after {
        display: inline-block;
        content: " ";
        height: 7px;
        width: 7px;
        border-width: 0 1px 1px 0;
        border-color: #999999;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform-origin: center;
        transition: transform .3s;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -7px;
    }
    .vidoe_char_img{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        object-fit: cover;
        z-index: 10;
        display: block;
    }
    .vidoe_char_div{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        z-index: 99;
        background: #000;
        opacity: 0.5;
        color:#fff;
        
    }
    .vidoe_char_div2{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        z-index: 999;
        color:#fff;
        font-size: 1rem;

    }
    .vidoe_char_div2 .p1{
        margin:0;
        margin-top: 4rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .vidoe_char_div2 .p2{
        margin:0;
        text-align: center;

    }

    .vidoe_char_div2 .p2 .p_btn_1{
        margin: 0;
        border: 1px solid #fff;
        border-radius: 200rem;
        padding: 0.4rem 1rem;
        display: inline-block;
        line-height: 1rem;
        margin-right: 1.5rem;
    }
    .vidoe_char_div2 .p2 .p_btn_1 a{
        color: #fff;
        text-decoration: none;
    }
    .vidoe_char_div2 .p2 .p_btn_2{
        margin: 0;
       /* border: 1px solid #fff;*/
        border-radius: 200rem;
        padding: 0.4rem 1rem;
        line-height: 1rem;
        display: inline-block;
        color:#fff;
        background: #FF753F;
    }
</style>